/* 学习目标：掌握 - 受控组件的写法  */
// 作用: 类似v-model, 双向绑定
// 场景: 1. 收集用户输入数据 2. 回填表单

import React, { useState } from 'react';

function useFormInput() {
  const [count, setCount] = useState('');
  const onChange = (e) => {
    setCount(e.target.value);
  };

  return {
    count,
    onChange,
  };
}

export default function App() {
  const { count, onChange } = useFormInput();
  return (
    <div>
      <input type="text" value={count} onChange={onChange} />
      <Child></Child>
    </div>
  );
}

function Child() {
  const { count, onChange } = useFormInput();
  return <input type="text" value={count} onChange={onChange} />;
}
